<!-- eslint-disable no-undef -->
<template>
  <nav class="win-top">
    <jc-icon :name="icon"></jc-icon>
    <slot name="left"></slot>
    <div class="title">
      <slot name="title"></slot>
    </div>
    <!--窗口控制按钮-->
    <ul class="windowtool-box">
      <jc-icon class="windowtool-icon" size="13" @click.stop="windowMin" name="window-min" />
      <jc-icon
        class="windowtool-icon"
        size="13"
        @click.stop="windowToggle"
        :name="windowSizeIcon"
      />
      <jc-icon
        class="windowtool-icon close"
        @click.stop="windowClose"
        size="13"
        name="window-close"
      />
    </ul>
  </nav>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { Ref } from 'vue'
// eslint-disable-next-line no-undef
const { ipcRenderer } = require('electron')

const props = defineProps<{
  windowName: string
  icon: string
}>()

const windowSizeIcon: Ref<'window-max' | 'window-middle'> = ref('window-max')

/**返回当前窗口实例 */
function getCurrentWindow() {
  return require('@electron/remote').getCurrentWindow()
}

/**窗口关闭 */
function windowClose() {
  const id = getCurrentWindow().id
  ipcRenderer.send('ipc-window-manager-by-id', {
    action: 'hide',
    id: id
  })
}
/**窗口的最大化和还原的切换 */
function windowToggle() {
  if (windowSizeIcon.value === 'window-max') {
    getCurrentWindow().maximize()
    windowSizeIcon.value = 'window-middle'
  } else {
    getCurrentWindow().restore()
    windowSizeIcon.value = 'window-max'
  }
}
/**最小化窗口 */
function windowMin() {
  getCurrentWindow().minimize()
}
</script>

<style lang="scss" scoped>
nav.win-top {
  -webkit-app-region: drag;
  width: 100%;
  height: 30px;
  background-color: #c9e2d6;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;

  span {
    padding: 0 9px 0 9px;
  }

  .title {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
  }

  ul.windowtool-box {
    font-size: small;
    -webkit-app-region: no-drag;
    position: absolute;
    right: 0px;
    margin: 0;
    padding: 0;
    display: table;
    list-style: none;
    height: 30px;

    .windowtool-icon {
      color: #565656;
      height: 100%;
      min-width: 30px;
      display: table-cell;
      text-align: center;
      vertical-align: middle;

      &:hover {
        color: #000;
        background-color: #d5d5d5;
      }

      &.close:hover {
        color: #fff;
        background-color: red;
      }
    }
  }
}
</style>
